<template>
  <div class="home1">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>酸轧班组报表概览</h1>
      </div>
    </div>
    <div class="page-layout">
      <div class="header-area">
        <div class="header-item">
          <img src="/src/assets/images/report/tcm2280/plan.png" alt="" />
          <span class="sub-text">日计划(吨)</span>
          <span class="main-text">{{ headerInfo.plan }}</span>
        </div>
        <div class="header-item">
          <img src="/src/assets/images/report/tcm2280/actual.png" alt="" />
          <span class="sub-text">日实际(吨)</span>
          <span class="main-text">{{ headerInfo.actual }}</span>
        </div>
        <div class="header-item">
          <img src="/src/assets/images/report/tcm2280/overshort.png" alt="" />
          <span class="sub-text">超欠(吨)</span>
          <span class="main-text">{{ headerInfo.overshort }}</span>
        </div>
        <div class="header-item">
          <img src="/src/assets/images/report/tcm2280/achi.png" alt="" />
          <span class="sub-text">达成率(%)</span>
          <span class="main-text">{{ headerInfo.achi }}</span>
        </div>
      </div>
      <div class="main-area">
        <div class="crew area">
          <div class="crew-graph">
            <div class="title">
              <img src="/src/assets/images/report/tcm2280/title-icon1.png" />
              <span>时间段统计</span>
            </div>
            <div style="height: 32vh">
              <graph-bar-line
                :datax="dateRangeGraph.x"
                :data-bar1="dateRangeGraph.y1"
                :data-bar2="dateRangeGraph.y2"
                :data-bar3="dateRangeGraph.y3"
                :data-line1="dateRangeGraph.y4"
                :bar-name="['计划班产(吨)', '实际班产(吨)', '超欠(吨)']"
                :line-name="['完成率(%)']"
                :legend-pos="8"
                :call-back="onDateRangeClick"
              />
            </div>
          </div>
          <div class="crew-stop">
            <div class="crew-stop-head">
              <img src="/src/assets/images/report/tcm2280/title-icon2.png" />
              <span>{{ curDateTypeTitle }}</span>
              <div class="line"></div>
              <img src="/src/assets/images/report/tcm2280/title-icon3.png" />
            </div>
            <div style="display: flex; flex-direction: column; gap: 1vh; overflow: auto" class="hide-scrollbar">
              <div
                class="table-row"
                v-for="(item, index) in curStopData"
                :key="item.stopRange"
                :style="index % 2 == 0 ? { background: '#112e6b' } : { background: 'transparent' }"
                v-if="curStopData.length > 0"
              >
                <div class="table-index">
                  <span>{{ index + 1 }}</span>
                </div>
                <div class="table-col">
                  <span class="label">停机时间段</span>
                  <span class="value">{{ item.stopRange ?? '' }}</span>
                </div>
                <div class="table-col">
                  <span class="label">停机时长</span>
                  <span class="value">{{ item.duration ?? '' }}</span>
                </div>
                <div class="table-col">
                  <span class="label">影响产量(吨)</span>
                  <span class="value">{{ item.output ?? '' }}</span>
                </div>
                <div class="table-col">
                  <span class="label">停机原因</span>
                  <span class="value">{{ item.reason ?? '暂无' }}</span>
                </div>
              </div>
              <el-empty v-else />
            </div>
          </div>
        </div>
        <div class="prioritize area">
          <div class="title">
            <img src="/src/assets/images/report/tcm2280/title-icon1.png" />
            <span>重点关注</span>
          </div>
          <div class="text-container hide-scrollbar">
            <div class="text-item" v-for="(item, index) in prioritizeData" :key="index">
              <div class="title-area">
                <img src="/src/assets/images/report/tcm2280/title-icon4.png" />
                <span>{{ item.title }}</span>
              </div>
              <span class="text-main">{{ item.main1 }}</span>
              <span class="text-main">{{ item.main2 }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-area area">
        <div class="title" style="width: 100%">
          <img src="/src/assets/images/report/tcm2280/title-icon1.png" />
          <span>效率分析</span>
        </div>
        <div class="main-content">
          <div class="steel-graph">
            <graph-bar-line
              :data-bar1="steelGradeGraph.y1"
              :datax="steelGradeGraph.x"
              :data-line1="steelGradeGraph.y2"
              :bar-name="['产量(吨)']"
              :line-name="['速度达成率(%)']"
              :call-back="onSteelGradeClick"
            />
          </div>
          <div class="re-welding">
            <div class="crew-stop-head">
              <img src="/src/assets/images/report/tcm2280/title-icon2.png" />
              <span>{{ curSteelGrade }}</span>
              <div class="line"></div>
              <img src="/src/assets/images/report/tcm2280/title-icon3.png" />
            </div>
            <graph-bar-line :data-bar1="reWeldRateGraph.y1" :datax="reWeldRateGraph.x" :bar-name="['重焊率(%)']" />
          </div>
          <div class="affect-prod">
            <el-table
              :data="affectProd"
              :header-cell-style="{
                background: '#2f59af',
                textAlign: 'left',
                color: '#fff',
                fontWeight: '700',
                fontSize: '12px',
              }"
              :cell-style="{ border: '1px solid #246497' }"
              border
            >
              <el-table-column prop="crew" label="班组" width="60" />
              <el-table-column prop="chonghanOutput" label="重焊影响产量[吨]">
                <template #header>
                  <span @click="toReWeldList">重焊影响产量[吨]</span>
                </template>
              </el-table-column>
              <el-table-column prop="kaijuanOutput" label="开卷异常[吨]">
                <template #header>
                  <span @click="toReWeldCount">开卷异常[吨]</span>
                </template>
              </el-table-column>
              <el-table-column prop="jianqieOutput" label="异常剪切次数" />
              <el-table-column prop="totalOutput" label="影响产量合计[吨]" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onUnmounted, nextTick, shallowRef, computed } from 'vue';
  import { ElMessage, ElNotification } from 'element-plus';
  import GraphBarLine from './components/GraphBarLine.vue';
  import { tcm2280Api } from '/@/api/report/index';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const headerInfo = reactive({
    plan: '',
    actual: '',
    overshort: '',
    achi: '',
  });

  interface GraphData {
    x: string[];
    y1: number[];
    y2?: number[];
    y3?: number[];
    y4?: number[];
    other?: any;
  }

  const dateRangeGraph = reactive<GraphData>({
    x: [],
    y1: [],
    y2: [],
    y3: [],
    y4: [],
  });

  const steelGradeGraph = reactive<GraphData>({
    x: [],
    y1: [],
    y2: [],
  });

  const reWeldRateGraph = reactive<GraphData>({
    x: [],
    y1: [],
  });

  const curDateTypeTitle = ref('');
  const curSteelGrade = ref('');

  const stopDate = ref<any>([]);
  const curStopData = ref<any>([]);
  const crewStopMap = ref<Map<number, string>>(new Map());

  const prioritizeData = ref<any>([]);
  const affectProd = ref<any>([]);

  const toReWeldList = () => {
    router.push('/acidRollingProductionEfficiency/reWeldingFrequencyTraceability');
  };

  const toReWeldCount = () => {
    router.push('/acidRollingProductionEfficiency/productionschedulereport');
  };

  const onDateRangeClick = (params: any) => {
    curDateTypeTitle.value = params.name;
    const curCrew = crewStopMap.value.get(params.dataIndex);
    curStopData.value = [];
    stopDate.value.forEach((item: any) => {
      if (item.crew === curCrew) curStopData.value.push(item);
    });
  };

  const onSteelGradeClick = (params: any) => {
    curSteelGrade.value = params.name;
    getReWeldRate(params.name);
  };

  const getOutput = async () => {
    try {
      const params = {};
      const res = await tcm2280Api.getOutput(params);
      headerInfo.plan = res.data.data.target;
      headerInfo.actual = res.data.data.actual;
      headerInfo.overshort = res.data.data.overNum;
      headerInfo.achi = res.data.data.overRate;
    } catch (err) {
      throw err;
    }
  };

  const getOutputCrew = async () => {
    try {
      const params = {};
      let graph: GraphData = { x: [], y1: [], y2: [], y3: [], y4: [] };
      const res = await tcm2280Api.getOutputCrew(params);
      res.data.data.forEach((element: any) => {
        graph.x.push(element.crew);
        graph.y1.push(element.target);
        graph.y2?.push(element.actual);
        graph.y3?.push(element.overNum);
        graph.y4?.push(element.overRate);
      });
      dateRangeGraph.x = graph.x;
      dateRangeGraph.y1 = graph.y1;
      dateRangeGraph.y2 = graph.y2;
      dateRangeGraph.y3 = graph.y3;
      dateRangeGraph.y4 = graph.y4;
      curDateTypeTitle.value = res.data.data[0].crew;
      const chineseRegex = /[甲乙丙丁]/g;
      crewStopMap.value = new Map(graph.x.map((item: any, index: number) => [index, item.match(chineseRegex)?.join('') ?? '']));
    } catch (err) {
      throw err;
    }
  };

  const getStop = async () => {
    try {
      const params = {};
      const res = await tcm2280Api.getStop(params);
      stopDate.value = res.data.data;
      stopDate.value.forEach((item: any) => {
        if (item.crew === crewStopMap.value.get(0)) curStopData.value.push(item);
      });
    } catch (err) {
      throw err;
    }
  };

  const getPrioritize = async () => {
    try {
      const res = await tcm2280Api.getPrioritize({});
      steelGradeGraph.x = res.data.data.steelGrade;
      steelGradeGraph.y2 = res.data.data.belowStandardRate;
      steelGradeGraph.y1 = res.data.data.outputWt;
      curSteelGrade.value = res.data.data.steelGrade[0];
      getReWeldRate(res.data.data.steelGrade[0]);
    } catch (err) {
      throw err;
    }
  };

  const getReWeldRate = async (steelGrade: string) => {
    try {
      const params = { beginDate: '', steelGrade: steelGrade };
      const res = await tcm2280Api.getReWeldRate(params);
      reWeldRateGraph.y1 = res.data.data.rateList;
      reWeldRateGraph.x = res.data.data.crewList;
    } catch (err) {
      throw err;
    }
  };

  const getAffectProd = async () => {
    try {
      const params = {};
      const res = await tcm2280Api.getAffectProd(params);
      affectProd.value = res.data.data;
    } catch (err) {
      throw err;
    }
  };

  const getPrioritizeData = async () => {
    try {
      const params = {};
      const res = await tcm2280Api.getPrioritizeData(params);
      prioritizeData.value = res.data.data;
    } catch (err) {
      throw err;
    }
  };

  const fetchData = () => {
    Promise.all([getOutput(), getOutputCrew(), getStop(), getPrioritize(), getAffectProd(), getPrioritizeData()])
      .then(() => {
        ElNotification({
          title: '提示',
          message: '数据获取成功',
          type: 'success',
          duration: 2000,
        });
      })
      .catch((err: any) => {
        console.error('数据获取失败:' + err);
        ElMessage({
          message: '数据获取失败' + err.message,
          type: 'error',
          duration: 2000,
        });
      });
  };

  onMounted(() => {
    fetchData();
  });
  onMounted(() => {});

  onUnmounted(() => {});
</script>
<style lang="less" scoped>
  .home1 {
    width: 100vw;
    background-color: rgba(2, 6, 53, 1);
  }
  .page-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    gap: 1vh;
    margin-top: -5vh;
    padding: 20px;
    width: 99.5%;
  }

  .area {
    background-color: rgba(12, 37, 87, 0.5);
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(19, 163, 255, 0.25), rgba(19, 163, 255, 0.25), rgba(19, 163, 255, 0.4)) 1 1;
    padding: 12px;
  }

  .title img {
    margin-top: -0.6vh;
  }

  .title span {
    font-weight: 700;
    font-size: 16px;
    font-family: '江城斜黑体', sans-serif;
    background-image: linear-gradient(to bottom, rgba(49, 190, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 2px rgba(48, 117, 211, 0.8)) drop-shadow(0 0 3px rgba(48, 117, 211, 0.6));
  }

  .crew-stop-head {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5vw;
    align-items: center;

    span {
      font-size: 14px;
      color: rgba(34, 217, 248, 1);
      font-weight: 700;
    }

    .line {
      display: flex;
      flex: 1;
      border: 1px solid rgba(27, 126, 242, 0.3);
      height: 1px;
      background-color: transparent;
    }
  }

  .header-area {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vw;
    min-height: 17vh;

    .header-item {
      background-image: url(/src/assets/images/report/tcm2280/head-bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      text-align: left;
      gap: 1vw;

      .sub-text {
        font-size: 16px;
        font-weight: 400;
        color: #fff;
      }

      .main-text {
        font-weight: 400;
        font-size: 30px;
        font-family: 'YouSheBiaoTiHei', sans-serif;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(48, 117, 211, 1));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 8px rgba(48, 117, 211, 0.8)) drop-shadow(0 0 12px rgba(48, 117, 211, 0.6));
      }
    }
  }

  .main-area {
    display: flex;
    flex-wrap: nowrap;
    height: 40vh;
    gap: 0.5vw;

    .crew {
      width: 66%;
      display: flex;
      flex-wrap: nowrap;
      gap: 1vw;

      .crew-graph {
        width: 40%;
      }

      .crew-stop {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 2vh;

        .table-row {
          display: flex;
          flex-wrap: nowrap;
          gap: 1vw;
          align-items: center;
          min-height: 6vh;
          padding: 12px;
        }

        .table-index {
          min-width: 1.2rem;
          background-image: url(/src/assets/images/report/tcm2280/index-icon.png);
          background-size: cover;
          text-align: center;

          span {
            font-weight: 700;
            font-size: 12px;
            font-family: '江城斜黑体', sans-serif;
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(49, 190, 255, 1), rgba(49, 190, 255, 1));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .table-col {
          display: flex;
          flex-direction: column;
          gap: 1vh;
          text-align: left;
          border-bottom: ipx solid rgba(12, 62, 121, 1);

          .label {
            font-weight: 400;
            font-size: 14px;
            color: rgba(175, 193, 205, 1);
          }

          .value {
            font-weight: 400;
            font-size: 14px;
            color: #fff;
            // min-height: 14px;
          }
        }
      }
    }

    .prioritize {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 1vh;

      .text-container {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        overflow: auto;
        min-height: 32vh;

        .text-item {
          display: flex;
          flex-direction: column;
          gap: 1vh;

          .title-area {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 0.5vw;

            span {
              font-weight: 700;
              font-size: 14px;
              background-image: linear-gradient(to bottom, rgba(19, 163, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }

          .text-main {
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            text-align: left;
          }
        }
      }
    }
  }

  .footer-area {
    height: 35vh;
    width: 100%;
    display: flex;
    flex-direction: column;

    .main-content {
      display: flex;
      flex-wrap: nowrap;
      height: 32vh;
      gap: 1vw;
    }

    .steel-graph {
      width: 50%;
      height: 100%;
    }

    .re-welding {
      width: 18%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 1vh;
    }

    .affect-prod {
      display: flex;
      flex: 1;
      // margin-top: 4vh;

      :deep(.el-table) {
        background-color: transparent;
        --el-table-border: none;
        --el-table-border-color: transparent;
        color: white;
        --el-table-row-hover-bg-color: unset;

        :deep(.el-table__row:nth-child(odd)) {
          background-color: #223671;
        }
      }

      :deep(.el-table__inner-wrapper::before) {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
      }
      :deep(.el-table__row:nth-child(odd)) {
        background-color: #091a47;
      }
      :deep(.el-table__row:nth-child(even)) {
        background-color: #162158;
      }

      :deep(.el-table th),
      :deep(.el-table tr),
      :deep(.el-table td) {
        background-color: transparent;
      }
    }
  }

  .hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
</style>
